<template>
  <view class="content">
    <view class="content-title" v-show="playInfo.title === ''? true : false">去播放列表播放音乐吧~
    </view>
    <!-- 播放器页面 -->
    <view class="content-play" v-show="playInfo.title !== ''? true : false">
      <!-- 显示音乐信息 -->
      <view class="content-play-info">
        <text>{{playInfo.title}}</text>
        <view>{{'—— '+ playInfo.singer +' ——'}}</view>
      </view>
      <!-- 显示专辑封面 -->
      <view class="content-play-cover">
        <image class="play-rocker" src="https://jeoz.top:3000/img/rocker.png" :style="{transform: transformPlay}">
        </image>
        <image class="play-img" :src="playInfo.imgUrl" :style="{animationPlayState: playState}">
        </image>
        <image class="play-disc" src="https://jeoz.top:3000/img/disc.png" :style="{animationPlayState: playState}">
        </image>
      </view>
      <!-- 显示播放进度和时间 -->
      <view class="content-play-progress">
        <text>{{playInfo.currentTime}}</text>
        <view>
          <slider @change="sliderChange" activeColor="#fba007" block-size="12" backgroundColor="#dadada"
            :value="playInfo.percent">
          </slider>
        </view>
        <text>{{playInfo.duration}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_music', ['playInfo', 'playList', 'audioCtx', 'audioState']),
      playState() {
        return this.audioState === 'running' ? 'running' : 'paused'
      },
      transformPlay() {
        if (this.audioState === 'running') {
          return 'rotate(12deg)'
        } else if (this.audioState === 'paused') {
          return 'rotate(-25deg)'
        }
      }
    },
    name: "music-play",
    data() {
      return {
        waitFlag: false,
      };
    },
    methods: {
      ...mapMutations('m_music', ['slider', 'audioWait']),
      // 获取用户当前选择的播放进度
      sliderChange: function(e) {
        var second = e.detail.value * this.audioCtx.duration / 100
        this.audioCtx.seek(second)
        this.audioWait()
      },
    }
  }
</script>

<style lang="scss">
  .content-title {
    font-size: 12pt;
    color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .content-play {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    height: 100vh;
    text-align: center;

    .content-play-info {
      position: relative;
      top: -80rpx;
    }

    .content-play-info>view {
      color: #888;
      font-size: 11pt;
      margin-top: 12rpx;
    }

    .content-play-cover {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      position: relative;

      .play-rocker {
        z-index: 2;
        position: absolute;
        width: 218rpx;
        height: 218rpx;
        right: 24.5%;
        bottom: 150rpx;
        transform: rotate(-25deg);
        transform-origin: 12px 12px;
        transition: 1s;
      }

      .play-img {
        position: absolute;
        right: 35%;
        top: -141rpx;
        animation: rotateImage 10s linear infinite;
        width: 224rpx;
        height: 224rpx;
        border-radius: 50%;
      }

      .play-disc {
        position: absolute;
        top: -230rpx;
        z-index: 1;
        animation: rotateImage 10s linear infinite;
        width: 400rpx;
        height: 400rpx;
        border-radius: 50%;
        border: 1px solid #ccc;
      }

      @keyframes rotateImage {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }
    }

    .content-play-progress {
      display: flex;
      align-items: center;
      margin: 0 35rpx;
      margin-bottom: 120rpx;
      font-size: 9pt;
      text-align: center;
    }

    .content-play-progress>view {
      flex: 1;
    }
  }
</style>